<template>
  <div class="chengjiao">
    <h2>{{ $t('最新成交') }}</h2>
    <div class="tou">
      <div class="zuo">{{ $t('时间') }}</div>
      <div>{{ $t('价格') }}</div>
      <div class="you">{{ $t('数量') }}</div>
    </div>
    <div v-for="item in realTimeDeals[symbol]" :key="item.id" class="xiangxi">
      <div class="zuo">{{ item.time | timeFormat('{h}:{i}:{s}') }}</div>
      <div class="price" :class="{sell: item.type === 'sell'}">{{ item.price | priceFormat(coinPair.decimals) }}</div>
      <div class="you">{{ item.amount | numberFormat(6) }}</div>
    </div>
  </div>
</template>
<script>
import { mapState, mapGetters } from 'vuex'
export default {
  computed: {
    ...mapState({
      symbol: ({ exchange }) => exchange.symbol,
      realTimeDeals: ({ exchange }) => exchange.realTimeDeals
    }),
    ...mapGetters({
      coinPair: 'market/coinPair'
    })
  }
}
</script>
<style scoped>
.price {
  color: #049e82 !important;
}
.sell {
  color: #d14b64 !important;
}
</style>
